<template>
  <div class="receptDetail">
    <g-notification :isGoBackNav="true">
      {{currDate}} - 导购详情
    </g-notification>
    <ai-main>
      <div class="guideInfo">
        <div class="txt">
          导购信息
        </div>
        <div class="details">
          <div class="left">
            <img class="guideImg" :src="currentGuider.portrait" alt="" width="140" height="140">
          </div>
          <div class="right">
            <div class="info">
              <span class="txt">姓名</span>
              <span class="item">{{currentGuider.name}}</span>
            </div>
            <div class="info">
              <span class="txt">编号</span>
              <span class="item">{{currentGuider.id}}</span>
            </div>
            <div class="info">
              <span class="txt">性别</span>
              <span class="item">{{(currentGuider.gender === 1? "男" : "女")}}</span>
            </div>
            <div class="info">
              <span class="txt">当日接待顾客</span>
              <span class="item">{{currentGuider.total + '人'}}</span>
            </div>
            <div class="info">
              <span class="txt">当日接待转化率</span>
              <span class="item">{{ currentGuider.dealed===0? '0.00%' : (Math.round(currentGuider.dealed / currentGuider.total * 10000) / 100.00 + '%') }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="currentReception">
        <div class="tableHead">
          <el-row>
            <el-col :span="4">
              <span class="txt" style="font-size:14px;">当日接待详情</span>
            </el-col>
            <el-col :span="20">
              <div class="grid-content bg-purple-light" style="text-align:right;">
                <div class="gender" style="display:inline-block;">
                  <label class="txt">性别</label>
                  <el-select v-model="genderValue" placeholder="请选择" size="mini" @change="pickedValue">
                    <el-option
                      v-for="item in genderOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="tablebody">
          <el-table :data="tableData"
                    style="width: 100%"
                    :cell-style="addStyle">
            <el-table-column prop="customer_id" label="顾客ID" width="130">
              <template slot-scope="scope">
                <router-link :to="{ name:'customerInfo', query: { customerId: scope.row.customer_id, lineId: scope.row.line_id }}"
                             class="customerLink">
                  {{scope.row.customer_id}}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="seconds" label="接待时长" width="130" :formatter="formatTime">
            </el-table-column>
            <el-table-column prop="customer_gender" label="顾客性别" width="130" :formatter="formatGender">
            </el-table-column>
            <el-table-column prop="customer_age" label="顾客年龄" width="130" :formatter="formatAge">
            </el-table-column>
            <el-table-column prop="is_dealed" label="是否成交" width="130" :formatter="formatDealed">
            </el-table-column>
            <el-table-column label="接待过程">
              <template slot-scope="scope">
                <span v-if="scope.row.footprints && scope.row.footprints.length>0">
                  <span  v-for="(item, index) in scope.row.footprints" :key="index">
                    <span v-show="index !== 0"> - </span>
                    <span>{{ areadata[item.zone_id]['name'] }}</span>
                    <span style="color: #999; font-size: 12px;" v-if="item.seconds">({{ item.seconds | formatTime2 }})</span>
                  </span>
                </span>
                <span v-else>无</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageBox" style="text-align:right;">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="pageChanged"
                         :current-page="currentPage"
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="10"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </ai-main>
  </div>
</template>

<script>
import { Row, Col, Select, Option, Table, TableColumn, Pagination } from 'element-ui'
import NotificationComp from '@/components/notification'
import Main from '@/components/main.vue'
import { APIGuiderInfo, APIReceptInfo } from '@/api/reception.js'
import { mapGetters } from 'vuex'

export default {
  name: 'receptdetail',

  data () {
    return {
      currDate: '',
      guiderId: 0,
      currentGuider: '',
      // 选择性别
      genderOptions: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '男性'
        },
        {
          value: '2',
          label: '女性'
        }
      ],
      genderValue: '',
      tableData: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0
    }
  },
  components: {
    elRow: Row,
    elCol: Col,
    elSelect: Select,
    elOption: Option,
    elTable: Table,
    elTableColumn: TableColumn,
    elPagination: Pagination,
    // 自定义组件
    gNotification: NotificationComp,
    aiMain: Main
  },
  created () {
    // 从url上面获取当前日期 和 导购 id
    this.guiderId = this.$route.query.id
    this.currDate = this.$route.query.date
    this.getGuiderInfo()
    this.getReceptInfo()
  },
  computed: {
    ...mapGetters([
      'mallMapData'
    ]),
    areadata () {
      let areadata = {}
      this.mallMapData.forEach(item => { areadata[item.id] = item })
      return areadata
    }
  },
  methods: {
    getGuiderInfo () {
      APIGuiderInfo({ shopId: this.$store.getters.mallId, salemanId: this.guiderId, date: this.currDate })
        .then((res) => {
          this.currentGuider = Object.assign(res.data.saleman, res.data.stats)
        })
    },
    getReceptInfo () {
      APIReceptInfo({ shopId: this.$store.getters.mallId,
        salemanId: this.guiderId,
        date: this.currDate,
        page: this.currentPage,
        page_size: this.currentPageSize,
        gender: this.genderValue
      })
        .then((res) => {
          this.tableData = res.data.stats.data
          this.total = res.data.stats.total
        })
    },
    // 切换页面
    pageChanged (val) {
      this.currentPage = val
      this.getReceptInfo()
    },
    // 切换每页条数
    handleSizeChange (val) {
      this.currentPageSize = val
      this.getReceptInfo()
    },
    // 选择性别
    pickedValue (val) {
      this.genderValue = val
      this.getReceptInfo()
    },
    // 时间显示转换
    formatTime: function (row, column) {
      if (!row.seconds) return '0秒'
      let hour = parseInt(row.seconds / 3600)
      let minute = parseInt(row.seconds % 3600 / 60)
      let second = row.seconds % 60
      return (hour > 0 ? hour + '时' : '') + (minute > 0 ? minute + '分' : '') + (second > 0 ? second + '秒' : '')
    },
    // 性别转化
    formatGender: function (row, column) {
      return row.customer_gender === 1 ? '男' : '女'
    },
    formatAge: function (row, column) {
      return row.customer_age + '岁'
    },
    // 是否成交转化
    formatDealed: function (row, column) {
      return row.is_dealed === 1 ? '成交' : '未成交'
    },
    // 表格单元格加样式
    addStyle ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 4 && row.is_dealed === 1) {
        return { 'color': '#0abf5b' }
      }
    }
  },
  filters: {
    formatTime2 (seconds) {
      if (!seconds) return '0秒'
      let hour = parseInt(seconds / 3600)
      let minute = parseInt(seconds % 3600 / 60)
      let second = seconds % 60
      return (hour > 0 ? hour + '时' : '') + (minute > 0 ? minute + '分' : '') + (second > 0 ? second + '秒' : '')
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.receptDetail {
  .title{
    padding: 10px 20px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #DDD;
    background-color: #FFF;
    font-size: 16px;
    font-weight: 700;
    .back{
      margin-right: 25px;
      color: #036dff;
      font-weight: 700;
    }
  }
  .guideInfo{
    padding: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #DDD;
    background-color: #FFF;
    font-size: 16px;
    font-weight: 700;
    .txt{
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: 700;
    }
    .details{
      display: flex;
      .left{
        width: 140px;
        height: 140px;
      }
      .right{
        padding-left: 20px;
        height: 140px;
        .info{
          height: 28px;
          line-height: 28px;
          .txt{
            display: inline-block;
            width: 100px;
            color: #888;
            font-size: 12px;
          }
          .item{
            display: inline-block;
            color: #000;
            font-size: 12px;
          }
        }
      }
    }
  }
  .currentReception{
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #DDD;
    background-color: #FFF;
    .tableHead{
      height: 28px;
      line-height: 28px;
      .gender{
        .txt{
          font-size: 12px;
        }
      }
    }
    .pageBox{
      padding: 10px 0px;
    }
  }
  .customerLink{
    color: #006eff;
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
}

</style>
